<template>
  <div class="info-attr-module">
    <div class="title">
      代表队信息
      <div v-if="sysParams.addLeader == '1'" class="add" @click="add(1)">
        <el-icon color="#00A0E9"> <CirclePlusFilled /> </el-icon>添加领队
      </div>
    </div>
    <div class="attr-data">
      <div class="item">
        <span>代表队名称</span>
        <div>{{ ruleForm.info.team ? ruleForm.info.team.teamName : '' }}</div>
      </div>
      <div class="item">
        <span>代表队编号</span>
        <div>{{ ruleForm.info.team ? ruleForm.info.team.jiancheng : '' }}-{{ ruleForm.info.team ? ruleForm.info.team.teamCode : '' }}</div>
      </div>
      <div class="item">
        <span>单位名称</span>
        <div>{{ ruleForm.info.team ? ruleForm.info.team.company : '' }}</div>
      </div>
      <div class="item">
        <span>所属地区</span>
        <div>{{ ruleForm.info.team ? ruleForm.info.team.province : '' }} {{ ruleForm.info.team ? ruleForm.info.team.city : '' }}</div>
      </div>
      <div class="item">
        <span>负责人姓名</span>
        <div>{{ ruleForm.info.creator ? ruleForm.info.creator.realName : '' }}</div>
      </div>
      <div class="item">
        <span>领队性别</span>
        <div>{{ ruleForm.info.creator ? (ruleForm.info.creator.sex == 1 ? '男' : '女') : '' }}</div>
      </div>
      <div class="item">
        <span>证件类型</span>
        <div>{{ ruleForm.info.creator ? baseService.certificateType(ruleForm.info.creator.idType) : '' }}</div>
      </div>
      <div class="item">
        <span>证件号码</span>
        <div>{{ ruleForm.info.creator ? baseService.hideIdCard(ruleForm.info.creator.idCard): '' }}</div>
      </div>
      <div class="item">
        <span>联系方式(手机)</span>
        <div>{{ ruleForm.info.creator ? ruleForm.info.creator.phone : '' }}</div>
      </div>
      <div class="item">
        <span>电子邮箱</span>
        <div>{{ ruleForm.info.creator ? ruleForm.info.creator.email : '' }}</div>
      </div>
      <div class="item">
        <span>领队照片</span>
        <div>
          <img
              :src="ruleForm.info.creator ? ruleForm.info.creator.header : ''"
            class="cert"
          />
        </div>
      </div>
      <div class="item">
        <span>领队授权书(单位盖章)</span>
        <div>
          <a :href="ruleForm.info.creator?ruleForm.info.creator.empower:''" target="_blank">点击查看</a>
        </div>
      </div>
      <div class="item">
        <span></span>
        <div>
          <div class="oper">
            <div class="e" @click="router.push('/wap/team/update')">
              <el-icon color="#00A0E9"> <Edit /> </el-icon>修改代表队
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="title">
      <div class="left">
        领队-1
        <span> (主领队)</span>
      </div>
    </div>
    <div class="attr-data">
      <div class="item">
        <span>账号</span>
        <div>{{ ruleForm.info.leader ? ruleForm.info.leader.phone : '' }}</div>
      </div>
      <div class="item">
        <span>姓名</span>
        <div>{{ ruleForm.info.leader ? ruleForm.info.leader.realName : '' }}</div>
      </div>
      <div class="item">
        <span>性别</span>
        <div>{{ ruleForm.info.leader ? (ruleForm.info.leader.sex == 1 ? '男' : '女') : '' }}</div>
      </div>
      <div class="item">
        <span>证件类型</span>
        <div>{{ ruleForm.info.leader ? baseService.certificateType(ruleForm.info.leader.idType) : '' }}</div>
      </div>
      <div class="item">
        <span>证件号码</span>
        <div>{{ ruleForm.info.leader ? baseService.hideIdCard(ruleForm.info.leader.idCard) : '' }}</div>
      </div>
      <div class="item">
        <span>联系方式(手机)</span>
        <div>{{ ruleForm.info.leader ? ruleForm.info.leader.phone : '' }}</div>
      </div>
      <div class="item">
        <span>电子邮箱</span>
        <div>{{ ruleForm.info.leader ? ruleForm.info.leader.email : '' }}</div>
      </div>
      <div class="item">
        <span>领队照片</span>
        <div>
          <img
              :src="ruleForm.info.creator ? ruleForm.info.creator.header : ''"
              class="cert"
          />
        </div>
      </div>
      <div class="item">
        <span>领队授权书</span>
        <div>
          <a :href="ruleForm.info.leader?ruleForm.info.leader.empower:''">点击查看</a>
        </div>
      </div>
    </div>
    <block v-for="(item, index) in ruleForm.info.fuLeaderList">
      <div class="title">领队-{{ index + 2 }}</div>
      <div class="attr-data">
        <div class="item">
          <span>账号</span>
          <div>{{ item.account }}</div>
        </div>
        <div class="item">
          <span>姓名</span>
          <div>{{ item.realName }}</div>
        </div>
        <div class="item">
          <span>性别</span>
          <div>{{ item.sex == 1 ? '男' : '女' }}</div>
        </div>
        <div class="item">
          <span>证件类型</span>
          <div>{{ baseService.certificateType(item.idType)}}</div>
        </div>
        <div class="item">
          <span>证件号码</span>
          <div>{{ baseService.hideIdCard(item.idCard) }}</div>
        </div>
        <div class="item">
          <span>联系方式(手机)</span>
          <div>{{ item.phone }}</div>
        </div>
        <div class="item">
          <span>电子邮箱</span>
          <div>{{ item.email }}</div>
        </div>

        <div class="item">
          <span>领队照片</span>
          <div>
            <img :src="item.header ? item.header : ''" class="cert"/>
          </div>
        </div>
        <div class="item">
          <span>领队授权书(单位盖章)</span>
          <div>
            <a :href="item.empower?item.empower:''" >点击查看</a>
          </div>
        </div>
        <div class="item">
          <span></span>
          <div>
            <div class="oper" style="margin-left: 5rem;">
              <div class="e del" v-if="item.phone != ruleForm.info.creator.phone" @click="delFuLeader(item.teamUserId)">
                <el-icon color="#959CA9"> <Delete /> </el-icon>删除
              </div>

              <div v-if="sysParams.updFuLeader == '1'" class="e" @click="setLeader(ruleForm.info.team.id, item.teamUserId)">
                <el-icon color="#00A0E9"> <Setting /> </el-icon>设置主领队
              </div>
            </div>
          </div>
        </div>
      </div>
    </block>
    <div style="height: 4rem"></div>
  </div>
</template>



<script lang="ts" setup>
import { reactive, ref } from "vue";
import baseService from "@/service/baseService";
import { setCache } from "@/utils/cache";
import {ElMessage, ElMessageBox, UploadProps} from "element-plus";
import router from "@/router";
import app from "@/constants/app";
const zhe = require("@/assets/zhezhao.png")
const dialogVisible = ref(false);
const ruleForm = reactive({
  info: {}
});
const review = ref({
  id: '',
  url: '',
});
const baseUrl = app.api;
const uploadIndex = ref(-1);
/**
 * 删除副领队
 */
const delFuLeader = (id: any) => {
  ElMessageBox.confirm("确定删除副领队, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
      .then(() => {
        baseService
            .post("/front/spteamuser/delete", { id: id })
            .then((res) => {
                  if (res.code === 0) {
                    getTeamInfo();
                    ElMessage.success('删除成功');
                  } else {
                    ElMessage.error(res.msg);
                  }
                }
            );
      })
      .catch(() => { });
};



/**
 * 设置成主领队
 */
const setLeader = (teamId: any, id: any) => {
  ElMessageBox.confirm("只能有一个主领队, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
      .then(() => {
        baseService
            .post("/front/spteamuser/setLeader", { teamId: teamId, id: id })
            .then((res) => {
                  if (res.code === 0) {
                    getTeamInfo();
                    ElMessage.success('设置成功');
                  } else {
                    ElMessage.error(res.msg);
                  }
                }
            );
      })
      .catch(() => { });
};

/**
 * 查询代表队信息
 */
const getTeamInfo = () => {
  baseService
      .get("/front/spteam/1", {})
      .then((res) => {
            if (res.code === 0) {
              let info = res.data;
              if (info) {
                ruleForm.info = info;
                setCache("userInfo", info, true);
              } else {
                //创建领队
                router.push("/account/team");
              }
            }
          }
      );
};

const showPic = (url: any, id: any, index: any) => {
  dialogVisible.value = true;
  review.value.url = url;
  review.value.id = id;
  uploadIndex.value = index;
}


/**
 * 修改授权书
 */
const updateEmpower = (id: any, url: any) => {
  baseService
      .post("/front/spuser/updateEmpower", {
        id:  id,
        empower: url
      })
      .then((res) => {
            if (res.code === 0) {
              //刷新当前页面
              getTeamInfo();
            }
          }
      );
};

/**
 * 添加领队
 */
const add=(type: any)=>{
  if(type==1){
    router.push({ path: "/wap/team/addLeader", query: { type: type } });
  }
}

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
  review.value.url = URL.createObjectURL(uploadFile.raw!)
  updateEmpower(review.value.id, response.data.src);
  if(response.data.showSrc){
    review.value.url = response.data.showSrc;
  }
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (!(rawFile.type == 'image/jpeg'||rawFile.type == 'image/png'||rawFile.type == 'image/jpg' || rawFile.type == 'application/pdf')) {
    ElMessage.error('仅支持JPG/JPEG/PNG/PDF格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 5) {
    ElMessage.error('授权书不能超过5MB!')
    return false
  }
  return true
}

const sysParams = ref({});
const querySysParams = async()  => {
  baseService.get('/front/spmatch/sysParams').then(e => {
    sysParams.value = e.data;
  })
};


getTeamInfo();
querySysParams();

</script>


<style lang="scss" scoped>
@import "./style.scss";
</style>
